<!-- 优惠券组  -->
<template>
	<view>
		<!-- 样式1 -->
		<view class="lg-coupon-wrap" v-if="mode == 1">
			<scroll-view class="scroll-box" scroll-x scroll-anchoring>
				<view class="coupon-box ss-flex">
					<view
						class="coupon-item"
						:style="[couponBg, { marginLeft: data.space + 'px' }]"
						v-for="(item, index) in couponList"
						:key="index"
					>
						<su-coupon
							size="lg"
							:textColor="data.fill.color"
							background=""
							:couponId="item.id"
							:title="item.discountContentView"
							:value="item.discount"
							:surplus="item.totalQuantity"
							:type="item.couponType"
							:sellBy="`${item.collectStartTime.substring(
								0,
								10,
							)} 至 ${item.collectEndTime.substring(0, 10)}`"
						>
							<template v-slot:btn>
								<button
									class="ss-reset-button card-btn"
									:style="[btnStyles]"
									@click.stop="onGetCoupon(item.id)"
								>
									{{ item.useStatusText }}
								</button>
							</template>
						</su-coupon>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 样式2 -->
		<view class="md-coupon-wrap" v-if="mode == 2">
			<scroll-view class="scroll-box" scroll-x scroll-anchoring>
				<view class="coupon-box ss-flex">
					<view
						class="coupon-item"
						:style="[couponBg, { marginLeft: data.space + 'px' }]"
						v-for="(item, index) in couponList"
						:key="index"
					>
						<su-coupon
							size="md"
							:textColor="data.fill.color"
							background=""
							:title="item.discountContentView"
							:value="item.discount"
							:surplus="item.totalQuantity"
							:couponId="item.id"
							:type="item.couponType"
							:sellBy="`${item.collectEndTime.substring(
								0,
								10,
							)} 至 ${item.collectStartTime.substring(0, 10)}`"
						>
							<template v-slot:btn>
								<button
									@click.stop="onGetCoupon(item.id)"
									class="ss-reset-button card-btn ss-flex ss-row-center ss-col-center"
									:style="[btnStyles]"
								>
									<view class="btn-text">{{ item.useStatusText }}</view>
								</button>
							</template>
						</su-coupon>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 样式3 -->
		<view class="xs-coupon-wrap" v-if="mode == 3">
			<scroll-view class="scroll-box" scroll-x scroll-anchoring>
				<view class="coupon-box ss-flex">
					<view
						class="coupon-item"
						:style="[couponBg, { marginLeft: data.space + 'px' }]"
						v-for="(item, index) in couponList"
						:key="index"
					>
						<su-coupon
							size="xs"
							:textColor="data.fill.color"
							background=""
							:title="item.discountContentView"
							:value="item.discount"
							:surplus="item.totalQuantity"
							:couponId="item.id"
							:type="item.couponType"
							:sellBy="`${item.collectStartTime.substring(
								0,
								10,
							)} 至 ${item.collectEndTime.substring(0, 10)}`"
						>
							<template v-slot:btn>
								<button
									class="ss-reset-button card-btn"
									:style="[btnStyles]"
									@click.stop="onGetCoupon(item.id)"
								>
									{{ item.useStatusText }}
								</button>
							</template>
						</su-coupon>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import $url from '/shop/url/index.js';
	import $coupon from '/shop/api/coupon.js';
	import _ from 'lodash';
	const props = defineProps({
		data: {
			type: Object,
			default: () => ({}),
		},
		styles: {
			type: Object,
			default: () => ({}),
		},
	});
	const { mode, button } = props.data;
	const couponBg = {
		background: `url(${$url.cdn(props.data.fill.bgImage)}) no-repeat top center / 100% 100%`,
	};
	const btnStyles = {
		background: button.bgColor,
		color: button.color,
	};
	const couponList = ref([]);
	//立即领取优惠券
	async function onGetCoupon(id) {
		const { code, msg, data } = await $coupon.get(id);
		if (code === '0') {
			uni.showToast({
				title: msg,
				icon: 'none',
			});
		} else {
			let { data } = await $coupon.listByIds({ ids: props.data.couponIds });
			couponList.value = [...data.data];
		}
	}
	onMounted(async () => {
		const ids = _.map(props.data.couponList, (e) => e.couponId);
		console.log('ids: ', ids);
		let { data } = await $coupon.listByIds({ ids: ids });
		// couponList.value = [...data.data, ...data.data, ...data.data, ...data.data];
		couponList.value = [...data];

		console.log('couponList.value: ', couponList.value);
	});
</script>

<style lang="scss" scoped>
	.card-btn {
		width: 140rpx;
		height: 50rpx;
		border-radius: 25rpx;
		font-size: 24rpx;
		line-height: 50rpx;
	}
	.coupon-item {
		&:nth-of-type(1) {
			margin-left: 0 !important;
		}
	}
	.md-coupon-wrap {
		.card-btn {
			width: 50rpx;
			height: 140rpx;
			margin: auto 0;
			margin-right: 20rpx;

			.btn-text {
				font-size: 24rpx;
				text-align: center;
				writing-mode: vertical-lr;
				writing-mode: tb-lr;
			}
		}
	}
</style>
